<template>
	<view class="page-content">
		<u-navbar title="新增房源线索" :background="background" :border-bottom="false" :is-back="true" title-color="#fff"
			back-icon-color="#fff">

		</u-navbar>
		<image class="bg-user" src="../../static/image/bg-form.png" mode="widthFix"></image>
		<view style="position: relative;z-index: 10;padding-top: 100rpx;">

			<view class="module-step">
				<view class="item" :class="curStep>=item.value?'on':''" v-for="(item,index) in stepList" :key="index">
					<view class="no">
						{{item.value}}
					</view>
					<view class="title fz12 mt10">
						{{item.label}}
					</view>

				</view>
			</view>
			<view class="p12">
				<view class="bg-white p15  pt24">
					<template v-if="addStep==2">
						<view class="p15 fz12" style="background: rgba(242,70,70,0.06);">请仔细阅读以下协议并签名确认！</view>
						<view class="p12 mt15" style="background: #F8F8F8;"></view>
						<view class="fz16 mt20" style="color: #F24646;">请填写以下信息</view>

						<view class="u-f-justify u-font-24 mt20">
							<u-checkbox v-model="checked" shape="circle" active-color="#F24646">
								<view class="u-font-24 pl2" style="line-height:40rpx;">
									我已阅读并同意以上条款，我承诺遵守所有相关规则和条件，并将继续执行后续步骤。</view>
							</u-checkbox>
						</view>
						<view class="mt20">
							<view class="fz14 c3">姓名</view>
							<view class="p12 mt8" style="background: #F8F8F8;">
								<input style="padding: 0;" v-model="post.value" type="text" placeholder="请填写您的姓名" />
							</view>
						</view>
						<view class="mt40">
							<view class="btn fz14">提交</view>
						</view>
					</template>
					<template v-if="addStep==1">
						<template v-if="isStart">
							<view class="mb18" v-for="(item,index) in fileList" :key="index">
								<view class="fz14 c3">{{item.label}}</view>
								<view class="fz12 c9 mt2" v-if="item.cssClass">{{item.cssClass}}</view>

								<view class="p12 mt8" style="background: #F8F8F8;" v-if="item.type=='text'">
									<input style="padding: 0;" v-model="post[item.value]" type="text"
										placeholder="请填写" />
								</view>
								<view class="p12 mt8 u-flex" style="background: #F8F8F8;" @click="toSelect(item)"
									v-if="item.type=='select'">
									<input class="u-f1" style="padding: 0;" disabled v-model="post[item.value+'Desc']"
										type="text" placeholder="请选择" />
									<u-icon name="arrow-down" class="fz12 c6"></u-icon>
								</view>
								<view class="p12 mt8 u-flex" style="background: #F8F8F8;" @click="toSelectDate(item)"
									v-if="item.type=='date'">
									<input class="u-f1" style="padding: 0;" disabled v-model="post[item.value]"
										type="text" placeholder="请选择" />
									<u-icon name="arrow-down" class="fz12 c6"></u-icon>
								</view>
								<view class="p12 mt8 u-flex" style="background: #F8F8F8;" v-if="item.type=='textarea'">
									<textarea class="u-f1 fz14" style="padding: 0;" v-model="post[item.value]"
										placeholder="请输入" />

								</view>

								<view class="p12 mt8" style="background: #F8F8F8;" v-if="item.type=='area'"
									@click="showThreePicker">
									<view class="areaPicker flex u-f-jsb">
										<view class="placeholder">
											<text>{{post.areaName || '请选择'}}</text>
										</view>
										<u-icon name="arrow-right" size="24"></u-icon>
									</view>
									<area-picker ref="areaPicker" v-model="showArea" :areaId="post.region"
										:defaultIndex="defaultIndex" @onConfirm="onConfirm" class="fsz26"></area-picker>
								</view>


								<view class="mt8 u-flex module-images" style="flex-wrap: wrap;"
									v-if="item.type=='images'">

									<view class="img-item" v-for="(img,imgIndex) in post[item.value]" :key="imgIndex">
										<u-icon name="close-circle-fill" class="ic-del"
											@click="toDel(item,imgIndex)"></u-icon>
										<image :src="img" style="width: 100%;height: 100%;" mode="aspectFill"></image>
									</view>
									<view class="img-add u-flex u-f-justify" @click="toUpload(item,9)">
										<u-icon name="plus" class="fz20 c9"></u-icon>
									</view>
								</view>
								<view class="mt8 u-flex module-images" style="flex-wrap: wrap;"
									v-if="item.type=='image'">
									<view class="img-item" style="width: 100%;height: 268rpx;margin: 0;"
										v-if="post[item.value]">
										<u-icon name="close-circle-fill" class="ic-del"
											@click="post[item.value]=''"></u-icon>

										<image :src="post[item.value]" style="width: 100%;height: 100%;"
											mode="aspectFill">
										</image>

									</view>
									<view v-else class="img-add u-flex u-f-justify"
										style="width:100%;height: 268rpx;margin: 0" @click="toUpload(item,1)">
										<u-icon name="plus" class="fz20 c9"></u-icon>
									</view>
								</view>
								<view class="mt8 u-flex module-images" style="flex-wrap: wrap;"
									v-if="item.type=='file'">

									
									<view class="img-item" style="width:100%;height:150rpx;margin: 0"
										v-if="post[item.value]">
										<u-icon name="close-circle-fill" class="ic-del"
											@click="post[item.value]=''"></u-icon>
										<image v-if="isImageOrFile(post[item.value])=='image'" :src="post[item.value]"
											style="width: 100%;height: 100%;" mode="aspectFill">
										</image>
										<view style="background: #f5f5f5;" v-else @click="openFiles(post[item.value])" class="u-flex mb12">
											<image src="../../static/image/ic-file.png" class="w36 h36"
												mode="aspectFill"></image>
											<view class="ml5">相关资料</view>
										</view>
									</view>
									<view v-else class="img-add u-flex u-f-justify"
										style="width:100%;height:150rpx;margin: 0;position: relative;">
										<u-icon name="plus" class="fz20 c9"></u-icon>
											<chuizi-file-upload style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 2;" type="file" btnName="上传文件"
												@doneUpload="doneUpload($event,item)"></chuizi-file-upload>
										
									</view>
								</view>
								<view class="mt8 u-flex module-images" style="flex-wrap: wrap;"
									v-if="item.type=='video'">

									<view class="img-item" style="width: 100%;height: 268rpx;margin: 0;"
										v-if="post[item.value]">
										<u-icon name="close-circle-fill" class="ic-del"
											@click="post[item.value]=''"></u-icon>
										<video :src="post[item.value]" style="width: 100%;height: 100%;">
										</video>
									</view>
									<view v-else class="img-add u-flex u-f-justify"
										style="width:100%;height: 268rpx;margin: 0" @click="uploadVideo(item)">
										<u-icon name="plus" class="fz20 c9"></u-icon>
									</view>
								</view>
							</view>

							<view class="mt40">
								<view class="btn fz14" @click="toAdd(2)">提交</view>
								<view class="btn btn1 fz14" @click="toAdd(1)">保存至草稿</view>
							</view>
						</template>
						<template v-else>
							<view class="p15 fz12" style="background: rgba(242,70,70,0.06);">
								{{curCateInfo.systematicName}}
							</view>
							<view class="p12 mt15" style="background: #F8F8F8;">

								<u-parse :html="curCateInfo.systematicIntroduction"></u-parse>

							</view>



							<view class="p12">
								<view class="fz14 c3">相关文件</view>

							</view>

							<view class="bg-white p12 pt0">
								<view
									v-if="curCateInfo.systematicAttachmentList && curCateInfo.systematicAttachmentList.length>0">
									<view @click="openFiles(item.url)" class="u-flex mb12"
										v-for="(item,index) in curCateInfo.systematicAttachmentList" :key="index">
										<image src="../../static/image/ic-file.png" class="w36 h36" mode="aspectFill">
										</image>

										<view class="ml5">{{item.name}}</view>
									</view>
								</view>




							</view>
							<view class="mt40">
								<view class="btn fz14" @click="toStart">开始填写</view>
							</view>
						</template>
					</template>
				</view>
			</view>

		</view>

		<u-popup :mask-close-able="false" v-model="showCard" mode="bottom" border-radius="20" :closeable="true">
			<view class="p20">
				<view></view>
				<scroll-view style="height: 750rpx;" scroll-y="true">
					<bankCard></bankCard>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 选择 -->
		<u-picker @confirm="popupConfirm" range-key="label" mode="selector" v-model="showPopup"
			:range="popupList"></u-picker>

		<!-- 日期 -->
		<u-picker mode="time" @confirm="dateConfirm" v-model="showDate" :params="params"></u-picker>
	</view>
</template>

<script>
	import {
		apiBaseUrl
	} from '../../config/config.js';
	import {
		getPlatform
	} from '@/config/util.js'
	import bankCard from "@/components/bank-card/index"

	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			bankCard,
			areaPicker
		},
		data() {
			return {
				background: {
					background: ''
				},
				apiBaseUrl,
				defaultIndex: [0, 0, 0],
				showArea: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				isStart: false,
				showDate: false,
				checked: false,
				addStep: 1,
				showInput: false,
				showCard: false,
				curStep: 1,
				filedType: 'date',
				fileList: [],
				stepList: [{
					label: '填写信息',
					value: 1
				}, {
					label: '等待审核',
					value: 2
				}, {
					label: '审核完成',
					value: 3
				}, ],
				curCateInfo: {},
				curSelectFiled: '',
				popupList: [],
				isDisabled: false,
				showPopup: false,
				curId: '',
				userInfo: {},
				post: {}
			}
		},
		onLoad(e) {
			this.post.categoryId = e.id
			this.getFiled(e.frontDisplayFields)


			if (e.curId) {
				this.curId = e.curId
				this.isStart = true
			}

			this.$api.notifyGetCategoryList({}, (res) => {
				if (res.code == 200) {
					res.data.some(item => {
						if (item.id == e.id) {
							this.curCateInfo = item
						}
					})
				}
			})

		},
		onShow() {},
		methods: {

			doneUpload(e,item) {

// 
uni.showLoading()
				console.log(e,item,1111);
				const uploadTask = uni.uploadFile({
					url: this.apiBaseUrl + 'api/file/upload', //仅为示例，非真实的接口地址
					filePath: e[0].url,
					fileType: 'image',
					name: 'file',
					header: {

						// 'Accept': 'application/json',
						// 'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': this.$db.get("userToken")
					},
					formData: {
						'file': e[0].url,

					},
					success: (uploadFileRes) => {
						let res=JSON.parse(uploadFileRes.data)
						this.post[item.value] = res.data
					},
					fail: (error) => {
						if (error && error.response) {
							showError(error.response);
						}
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 250);
					}
				});
			},
			toStart() {

				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.userInfo = res.data;
						this.isStart = true
					}
				})
			},
			openFiles(url) {
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: url, //源文件地址
					success(res) {
						uni.hideLoading()
						uni.openDocument({
							filePath: res.tempFilePath,
							// fileType: "pdf",
							showMenu: true,
							success: function(res) {
								console.log('文件打开成功');
							},
							fail: function(err) {
								console.error('文件打开失败', err);
							}
						})
					},
					complete: () => {

						uni.hideLoading()
					}
				})
			},
			isImageOrFile(fileName) {
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
				const extension = fileName.split('.').pop().toLowerCase();

				return imageExtensions.includes(extension) ? 'image' : 'file';
			},
			toAdd(type) {
				if (this.isDisabled) {
					return
				}
				this.isDisabled = true
				let post = JSON.parse(JSON.stringify(this.post))
				post.status = type

				if (this.curId) {
					post.id = this.curId
					this.$api.cluemanagementUpdate(post, (res) => {
						if (res.code == 200) {

							this.$common.successToShow('操作成功', ress => {
								uni.redirectTo({
									url: '/pages/house/my'
								})
							})
						} else {

							this.$common.errorToShow(res.message)
							this.isDisabled = false
						}
					})

				} else {

					this.$api.cluemanagementSave(post, (res) => {
						if (res.code == 200) {

							this.$common.successToShow('操作成功', ress => {
								uni.redirectTo({
									url: '/pages/house/my'
								})
							})
						} else {

							this.$common.errorToShow(res.message)
							this.isDisabled = false
						}
					})
				}
			},

			// 省市区联动初始化
			showThreePicker() {
				this.showArea = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.post.areaName = e[0].name + " " + e[1].name
				this.post.region = e[1].id
				if (e[2].name) {
					this.post.areaName = e[0].name + " " + e[1].name + " " + e[2].name
					this.post.region = e[2].id
				}
			},
			toDel(item, idx) {
				console.log(item.value, idx)
				this.post[item.value].splice(idx, 1)
			},
			toUpload(item, count) {
				this.$api.uploadImage(count, (res) => {
					if (res.code) {
						if (item.type == 'images') {
							this.post[item.value].push(res.data)
						}
						if (item.type == 'image' || item.type == 'file') {
							this.post[item.value] = res.data
						}

					}
				})
			},

			uploadVideo(item) {
				this.$api.uploadVideo((res) => {
					if (res.code) {

						this.post[item.value] = res.data

					}
				})
			},

			dateConfirm(e) {
				this.post[this.curSelectFiled] = `${e.year}-${e.month}-${e.day}`
			},
			toSelect(item) {
				this.curSelectFiled = item.value
				this.popupList = item.dataList
				this.showPopup = true
			},
			toSelectDate(item) {
				this.curSelectFiled = item.value
				this.showDate = true
			},
			popupConfirm(e) {
				let idx = e[0]
				this.post[this.curSelectFiled] = this.popupList[idx].value
				this.post[this.curSelectFiled + 'Desc'] = this.popupList[idx].label
			},
			getFiled(id) {
				this.$api.dictList({
					dictType: id
				}, res => {
					if (res.code == 200) {
						res.data.some(item => {
							this.$set(this.post, item.value, '')
							if (item.remark) {
								let attr = item.remark.split('/')
								if (attr[0]) {
									item.type = attr[0]
									if (item.type == 'images') {
										this.$set(this.post, item.value, [])
									}
									if (item.type == 'select') {
										this.$set(this.post, item.value + 'Desc', '')
									}
								}
								if (attr[1]) {
									item.dataList = JSON.parse(attr[1])
									console.log(item.dataList, 1231323)
								}
							}
						})
						this.fileList = res.data
						if (this.curId) {

							this.$api.cluemanagementDetail({
								id: this.curId
							}, res1 => {
								if (res1.code == 200) {


									Object.keys(this.post).some(i => {
										console.log(i, 1212)
										this.post[i] = res1.data[i]


										if (res1.data[i] == null) {
											this.post[i] = ''
										}
										if (i == 'leaseAgreementStartDate' || i ==
											'leaseAgreementEndDate') {
											this.post[i] = res1.data[i + 'Format']
											this.post[i] = this.post[i].replace(/\./g, "-");
										}
									})
									this.post.areaName = res1.data.regionName

									if (res1.data.propertyImages) {
										this.post.propertyImages = res1.data.propertyImages.split(',')
									} else {
										this.post.propertyImages = []
									}
								}
							})
						}

					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg-user {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}

	.btn {
		line-height: 80rpx;
		background: #F24646;
		text-align: center;
		width: 100%;
		color: #fff;

		&.btn1 {
			margin-top: 24rpx;
			background: rgba(242, 70, 70, 0.1);
			color: #F24646;

		}
	}

	.module-step {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin: 0 48rpx;
		position: relative;
		color: #FFAEAE;

		&::after {
			content: '';
			border-top: 1px dashed #FFAEAE;
			position: absolute;
			left: 60rpx;
			right: 60rpx;
			top: 24rpx;
		}

		.item {
			position: relative;
			z-index: 1;

			&.on {
				color: #fff;

				.no {

					background: #fff;
				}
			}
		}

		.no {
			width: 48rpx;
			height: 48rpx;
			background: #FFAEAE;
			border-radius: 50%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #F24646;
			font-size: 32rpx;
		}
	}

	.apply-tips {
		color: #F24646;
	}

	.module-images {
		.img-item {
			width: 150rpx;
			height: 150rpx;
			position: relative;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.ic-del {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			font-size: 36rpx;
			color: #fff;
			z-index: 2;
		}

		.img-add {
			background: #F8F8F8;
			width: 150rpx;
			height: 150rpx;
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}
	}
</style>